<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en" class="sharehtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0"/>
    <title>领取优惠券</title>
    <%@ include file="/include/datetables.jsp" %>

    <style>
        .sharehtml {
            background: url('../images/bg_card.png') no-repeat;
        }

        .share_text_style {
            position: absolute;
            height: 30%;
            width: 90%;
            bottom: 8%;
            top: 30%;
            left: 5%;
            right: 5%;
            border-radius: 5px;
            padding: 4%;
            position: absolute;
            box-sizing: border-box;
            background-color: #EDE0D4;
        }

        .divOne {
            position: relative;
            height: 100%;
            width: 100%;
            z-index: 1;
        }

        .divTwo {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            position: absolute;
            top: 0px;
            left: 0;
            z-index: 2;
        }

        .share_text_style h4 {
            color: #666666;
            clear: both;
            text-align: center;
            font-size: 12px;
            font-weight: 400;
            margin-bottom: 1rem;
        }

        .share_text_style ul li {
            font-size: 8px;
            color: #666;
            line-height: 18px;
        }

        .title {
            text-align: center;
            font-size: 15px;
            margin-top: 15px;
            margin-bottom: 20px;
            color: rgba(119, 52, 26, 0.7);
        }

        .input {
            width: 100%;
            font-size: 14px;
            border-radius: 5px;
            height: 40px;
            padding-left: 8px;
            border-color: #ddd;
            background-color: #fff;
            line-height: normal;
            vertical-align: middle;
        }

        .sharewraptop {
            height: 33%;
            background: url('../images/card_head.png') no-repeat;
            background-position: top;
            background-size: 100% auto;
            background-attachment: fixed
        }

        .vertical-container {
            height: 100%;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
        }

        .vertical-containerTwo {
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
        }
    </style>
</head>
<body class="sharewrap">
<%--<div style="background: #63694b;width: 100%;height: 100%" id="dialog"></div>--%>
<div class="divOne">
    <div class="sharewraptop"></div>
    <div class="sharegroup" style="padding-top: 0px">
        <p class="title">获取优惠券</p>
        <%--<div class="coupongroup">
            <div class="couponbg"></div>
            <div class="rows coupon">
                <div class="cols6">
                    <div class="info_head bgimg_hsize"></div>
                </div>
                <div class="cols14">
                    <p class="info_tit">适用于全部门店</p>
                    <p class="info_txt cnt">---</p>
                    <p class="info_txt tips">--</p>
                </div>
            </div>
        </div>--%>
        <div class="form-group" style="margin-left: 5%;margin-right: 5%">
            <input id="userPhone" class="input" placeholder="请输入手机号"/>
            <button id="getBtn" class="btn w_10 share_btn" style="margin-top: 15px;height: 40px;font-size: 14px">立即领取
            </button>
        </div>

        <div class="share_text_style">
            <h4>活动规则</h4>
            <ul>
                <li>1.优惠券新老用户同享</li>
                <li>2.优惠券可与计次卡消费，余额消费搭配使用</li>
                <li>3.优惠券仅限到国医堂小儿推拿指定门店使用</li>
                <li>4.仅限领取手机号注册的会员到店消费使用</li>
                <li>5.其他未尽事项，请咨询客服</li>
            </ul>
        </div>
    </div>
</div>
<div class="divTwo" align="center" style="align-content: center;display: none">
    <img src="../images/close.png" id="click"
         style="width: 20%;position: absolute;top: 15%;float: right;z-index: 2;margin-left: 30%;padding: 7%"/>
    <div class="vertical-container">
        <img src="../images/dialog_card.png" style="width: 100%;position: relative"/>
        <img src="../images/card_count.png" style="width: 45%;z-index: 2;position: absolute;top: 41%;" id="card_img"/>
        <div class="vertical-containerTwo" style="z-index: 2;position: absolute;top: 45.8%;left: 34%;display: none"
             id="card_1">
            <span style="font-size: 12px;color: #fd3e16">¥</span>
            <span style="font-size: 26px;color: #fd3e16" id="discountCosts"></span>
        </div>
        <div style="z-index: 2;position: absolute;top: 44.5%;left: 49%;display: none" id="card_2">
            <span style="font-size: 16px;color: #fd3e16" id="card_type"></span>
        </div>
        <div style="z-index: 2;position: absolute;top: 44%;width:40%;left: 30%;right: 30%;display: none"
             class="vertical-containerTwo"
             id="card_3">
            <span style="font-size: 16px;color: #fd3e16" id="card_ss"></span>
        </div>
        <div style="z-index: 2;position: absolute;top: 47%;width:40%;left: 30%;right: 30%;display: none"
             class="vertical-containerTwo"
             id="card_4">
            <span style="font-size: 16px;color: #fd3e16" id="card_dd"></span>
        </div>
        <div style="z-index: 2;position: absolute;top: 45.8%;left: 49%;display: none" id="card_5">
            <span style="font-size: 16px;color: #fd3e16" id="card_aa"></span>
        </div>
        <div style="z-index: 2;position: absolute;top: 47%;left: 49%">
            <span style="font-size: 10px;color: #999999" id="card_count"></span>
        </div>
        <div style="z-index: 2;position: absolute;top: 54%;left: 30%;right: 30%;text-align: left">
            <span style="font-size: 10px;color: #ffc178" id="shop">限制门店：</span>
        </div>
        <div style="z-index: 2;position: absolute;top: 57%;left: 30%;right: 30%;text-align: left">
            <span style="font-size: 10px;color: #ffc178" id="validDay">有效期：</span>
        </div>
        <div style="z-index: 2;position: absolute;top: 60%;left: 30%;right: 30%;text-align: left">
            <span style="font-size: 10px;color: #ffc178" id="discountDesc">使用说明：</span>
        </div>
        <div style="z-index: 2;position: absolute;top: 45.8%;display: none" id="card_msg">
            <span style="font-size: 15px;color: #e6e6e6;line-height: 25px" id="card_message"></span>
        </div>
        <div style="z-index: 2;position: absolute;top: 67.5%;left: 40%;right: 40%;text-align: left;" align="center"
             class="vertical-containerTwo" id="ookk">
            <img src="../images/card_button.png" style="width: 100%;z-index: 2;position: absolute;"/>
            <span style="font-size: 12px;color: #fe522c;z-index: 3;position: absolute;width: 100%;text-align: center;">领取成功</span>
        </div>
        <div style="z-index: 2;position: absolute;top: 65%;left: 40%;right: 40%;text-align: left;display: none"
             align="center"
             class="vertical-containerTwo" id="ok">
            <img src="../images/card_button.png" style="width: 100%;z-index: 2;position: absolute;"/>
            <span style="font-size: 12px;color: #fe522c;z-index: 3;position: absolute;width: 100%;text-align: center;">确定</span>
        </div>
    </div>
</div>
</body>
<!-- <script src="${pageContext.request.contextPath}/js/zcbase.js"></script> -->
<script>
    function findCard() {
        var couponId = baseFn.getQueryString('couponId', true);
        if (isNotNullFun(couponId)) {
            $.ajax({
                url: baseUrl.base + "card/selectSysDiscountInfo",
                type: 'get',
                data: {cardId: couponId},
                success: function (res) {
                    var _data = res.results;
                    $(".divTwo").show();
                    $('#shop').show();
                    $('#validDay').show();
                    $('#discountDesc').show();
                    $('#ookk').show();
                    $('#ok').hide();
                    if (res.code == "0") {
                        $("#card_img").show();
                        $("#couponName").html(res.results.cardName);
                        if (_data.cardType == 3) {
                            //通用
                            $("#card_img").attr("src", "../images/card_count.png");
                            $('#discountCosts').html(_data.discountCosts);
                            $('#card_aa').html("通用券");
                            $('#card_count').hide();
                            var now = new Date().getTime();
                            $('#validDay').html("有效期：" + timestampToTime(now + (_data.validDay * 1000 * 60 * 60 * 24)));
                            $('#discountDesc').html("使用说明：" + _data.discountDesc);
                            $('#card_1').show();
                            $('#card_2').hide();
                            $('#card_3').hide();
                            $('#card_4').hide();
                            $('#card_5').show();
                        } else if (_data.cardType == 1) {
                            //满减券
                            $("#card_img").attr("src", "../images/card_count.png");
                            $('#discountCosts').html(_data.discountCosts);
                            $('#card_type').html("满减券");
                            $('#card_count').html("满" + _data.targetCost + "元立减");
                            var now = new Date().getTime();
                            $('#validDay').html("有效期：" + timestampToTime(now + (_data.validDay * 1000 * 60 * 60 * 24)));
                            $('#discountDesc').html("使用说明：" + _data.discountDesc);
                            $('#card_1').show();
                            $('#card_2').show();
                            $('#card_3').hide();
                            $('#card_4').hide();
                            $('#card_5').hide();
                        } else if (_data.cardType == 2) {
                            //体验券
                            $("#card_img").attr("src", "../images/bg_card_center.png");
                            $('#card_ss').html("体验券");
                            $('#card_dd').html(_data.cardName);
                            $('#card_1').hide();
                            $('#card_2').hide();
                            $('#card_3').show();
                            $('#card_4').show();
                            $('#card_5').hide();
                            var now = new Date().getTime();
                            $('#validDay').html("有效期：" + timestampToTime(now + (_data.validDay * 1000 * 60 * 60 * 24)));
                            $('#discountDesc').html("使用说明：" + _data.discountDesc);
                        }
                        if (!baseFn.notNull(_data.subclinicIds) || _data.subclinicIds == 0) {
                            $('#shop').text('限制门店：适用于全部门店')
                        } else {
                            $.get(baseUrl.base + baseUrl.subclinic + 'selectSubclinicList', {}, function (res) {
                                if (res.code == 0) {
                                    for (var i = 0; i < res.results.length; i++) {
                                        if (res.results[i].subclinicId = _data.subclinicIds) {
                                            $('#shop').html('限制门店：' + res.results[i].subclinicName);
                                            break;
                                        }
                                    }
                                } else {
                                    baseFn.infoDialog(res.msg)
                                }
                            }, 'json')
                        }
                        $('.info_txt.cnt').text(_data.cardName)
                        $('.info_txt.tips').text(_data.discountDesc == null ? '无' : _data.discountDesc)

                    } else {
                        baseFn.infoDialog(res.msg)
                    }
                }
            })
        }
    }

    $("#getBtn").click(function () {
        var couponId = baseFn.getQueryString('couponId', true);
        var _val = $.trim($('#userPhone').val());
        var _updata = {
            userPhone: '',
            couponId: couponId
        }
        if (/^13[0-9]{9}$|14[0-9]{9}|17[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/.test(_val)) {
            _updata.userPhone = _val
        } else {
            baseFn.infoDialog('请输入正确的手机号！');
            return false
        }
        $.ajax({
            url: baseUrl.base + "card/useCoupon",
            type: 'post',
            data: _updata,
            success: function (data) {
                if (data.code == "0") {
                    $('#card_message').hide();
                    findCard();
                } else if (data.code == "60011") {
                    $('#card_message').show();
                    $(".divTwo").show();
                    $("#card_img").hide();
                    $('#shop').hide();
                    $('#validDay').hide();
                    $('#discountDesc').hide();
                    $('#card_msg').show();
                    $('#ok').show();
                    $('#ookk').hide();
                    $('#card_message').html("你已经领取过<br>这个优惠券了<br>快快分享给你的朋友吧!");
                } else if (data.code == "60015") {
                    $('#card_message').show();
                    $(".divTwo").show();
                    $("#card_img").hide();
                    $('#shop').hide();
                    $('#validDay').hide();
                    $('#discountDesc').hide();
                    $('#card_msg').show();
                    $('#ok').show();
                    $('#ookk').hide();
                    $('#card_message').html("优惠券已经超过使用期限<br>下次记得提前领哦!");
                } else if (data.code == "60012") {
                    $('#card_message').show();
                    $(".divTwo").show();
                    $("#card_img").hide();
                    $('#shop').hide();
                    $('#validDay').hide();
                    $('#discountDesc').hide();
                    $('#card_msg').show();
                    $('#ok').show();
                    $('#ookk').hide();
                    $('#card_message').html("优惠券已被领完了<br>店内看看其他活动吧!");
                } else {
                    $('#card_message').show();
                    $(".divTwo").show();
                    $("#card_img").hide();
                    $('#shop').hide();
                    $('#validDay').hide();
                    $('#discountDesc').hide();
                    $('#card_msg').show();
                    $('#ok').show();
                    $('#ookk').hide();
                    $('#card_message').html(data.msg);
                }
            }
        })
    });

    window.onload = function () {
        var _h = $('.coupongroup').height()
        $('.coupon').css('height', _h + 'px')
    }

    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '年';
        M = (date.getMonth() + 1) + '月';
        D = date.getDate() + '日';
        return Y + M + D;
    }

    $("#ookk").click(function () {
        $("#userPhone").val("");
        $('.divTwo').hide();
        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx099845ee9271cbbd&redirect_uri=http%3a%2f%2fwechat.xrtn.dmpp.net.cn%2fchildren%2ffrontend%2fweb%2findex.php%3fr%3dchild%2fgetopenid&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
    });
    $("#ok").click(function () {
        $("#userPhone").val("");
        $('.divTwo').hide();
        window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx099845ee9271cbbd&redirect_uri=http%3a%2f%2fwechat.xrtn.dmpp.net.cn%2fchildren%2ffrontend%2fweb%2findex.php%3fr%3dchild%2fgetopenid&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
    });
    $("#click").click(function () {
        $("#userPhone").val("");
        $('.divTwo').hide();
    });
</script>
</html>